<template>
  <div>
    <el-row type="flex">
      <el-col :span="6"></el-col>
      <el-col :span="12">
        <!-- model 数据
            rules 校验规则
            ref 当前的组件对象
        -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- prop校验的名字 -->
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" clearable placeholder="4到16位（字母，数字，下划线）"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="ruleForm.age" clearable></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select clearable v-model="ruleForm.sex" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机" prop="tel">
            <el-input v-model="ruleForm.tel" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            
          </el-form-item>
        </el-form>
        <div>
          <el-table :data="tableData" border style="width: 100%">
           
            <el-table-column 
            v-for="(item,index) in headerData"
            :key="index"
            :prop="item.prop" 
            :label="item.label" 
            :width="item.width"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="deleteRow(scope)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    let validatename = (rule, value, callback) => {
      console.log(rule);
      console.log(value);
      let myreg = /^[\da-zA-Z_\u4e00-\u9f5a]{4,16}$/;
      if (!myreg.test(value)) {
        //不满足 callback(new Error("提示的文本"))
        callback(new Error("请输入正确的"));
      } else {
        // 满足直接放行
        callback();
      }
      // value是表单的值
      // callback 回调函数
    };
    let validateage = (rule, value, callback) => {
      let myreg = /^((1[0-5])|[1-9])?\d$/;
      if (!myreg.test(value)) {
        callback(new Error("请输入正确的"));
      } else {
        callback();
      }
      // ^((1[0-5])|[1-9])?\d$
    };
    let validatetel = (rule, value, callback) => {
      let myreg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!myreg.test(value)) {
        callback(new Error("请输入正确的"));
      } else {
        callback();
      }
    };
    return {
      headerData: [
        {
          prop: "name",
          label: "姓名",
          width: "150"
        },
        {
          prop: "sex",
          label: "性别",
          width: "150"
        },
        {
          prop: "age",
          label: "年龄",
          width: "150"
        },
        {
          prop: "tel",
          label: "手机"
        },
      
      ],
      options: [
        {
          value: "1",
          label: "男"
        },
        {
          value: "2",
          label: "女"
        },
        {
          value: "3",
          label: "其他"
        }
      ],
      ruleForm: {
        name: "",
        age: "",
        tel: "",
        sex: ""
      },
      rules: {
        name: [
          // required 是否 required: false 不填不校验 你填了我就校验
          // message 校验不通过提示的文本
          // trigger  什么时候校验 blur change
          // validator 自定义校验规则触发的校验函数
          {
            required: true,
            message: "4到16位（字母，数字，下划线）",
            trigger: "blur"
          },
          { validator: validatename, trigger: "blur" }
        ],
        age: [
          { required: true, message: "请输入年龄", trigger: "blur" },
          { validator: validateage, trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        tel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatetel, trigger: "blur" }
          //    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        ]
      },
      tableData: [
       
      ]
    };
  },
  methods: {
    deleteRow(scope){
      // console.log(scope) $index 下标 column当前表格的列对象 row当前的行对象
      let _self = this;
      _self.tableData.splice(scope.$index , 1)
    },
    submitForm(formName) {
      let _self = this;
      //  this.$refs[当前组件对象的名字]
      _self.$refs[formName].validate(valid => {
        if (valid) {
          //    校验通过
          let data = JSON.parse(JSON.stringify(_self.ruleForm))
          _self.tableData.push(data);
            _self.$refs[formName].resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>